<script setup lang="ts">
import ApexCharts from "apexcharts";
import { onMounted, useAttrs, reactive } from "vue";
import { sentryDipTop } from "@/api/modules/home/index";

const pageData = reactive({
  series: [],
  chartOptions: {
    chart: {
      width: 380,
      type: "pie"
    },
    colors:["#a30c0c", "#546E7A", "#d4526e", "#13d8aa", "#A5978B", "#2b908f", "#f9a3a4", "#90ee7e", "#f48024", "#69d2e7"],
    labels: [],
    responsive: [
      {
        breakpoint: 480,
        options: {
          chart: {
            width: 200
          },
          legend: {
            position: "bottom"
          }
        }
      }
    ]
  }
});

function uniDecode(text) {
  try {
    text = decodeURIComponent(text);
  } catch (e) {
    console.log(e);
  }
  text = text.replace(/(\\)?\\u/gi, "%u").replace("%u0025", "%25");

  text = unescape(text.toString().replace(/%2B/g, "+"));
  const matches = text.match(/(%u00([0-9A-F]{2}))/gi);
  if (matches) {
    for (let matchid = 0; matchid < matches.length; matchid++) {
      const code = matches[matchid].substring(1, 3);
      const x = Number("0x" + code);
      if (x >= 128) {
        text = text.replace(matches[matchid], code);
      }
    }
  }
  text = unescape(text.toString().replace(/%2B/g, "+"));

  return text;
}

function strToJson(text) {
  if (!text) {
    return false;
  }
  let source = uniDecode(text);
  // 用于记录最原始的json串
  // const originalJsonStr = "";
  // const curSortType = 0;
  // JSONP形式下的callback name
  // let funcName = null;
  let jsonObj = null;
  let fnTry = null;
  let fnCatch = null;

  // 下面校验给定字符串是否为一个合法的json
  try {
    // 再看看是不是jsonp的格式
    let reg = /^([\w\.]+)\(\s*([\s\S]*)\s*\)$/gm;
    const reTry = /^(try\s*\{\s*)?/g;
    const reCatch = /([;\s]*\}\s*catch\s*\(\s*\S+\s*\)\s*\{([\s\S])*\})?[;\s]*$/g;

    // 检测是否有try-catch包裹
    const sourceReplaced = source
      .replace(reTry, () => {
        fnTry = fnTry || arguments[1];
        return "";
      })
      .replace(reCatch, function () {
        fnCatch = fnCatch || arguments[1];
        return "";
      })
      .trim();

    const matches = reg.exec(sourceReplaced);
    if (matches != null && ((fnTry && fnCatch) || (!fnTry && !fnCatch))) {
      // funcName = matches[1];
      source = matches[2];
    } else {
      reg = /^([\{\[])/;
      if (!reg.test(source)) {
        return text;
      }
    }

    // 这里可能会throw exception
    jsonObj = JSON.parse(source);
  } catch (ex) {
    // console.info(/strToJson---ex：/, ex)
    // new Function的方式，能自动给key补全双引号，但是不支持bigint，所以是下下策，放在try-catch里搞
    try {
      jsonObj = new Function("return " + source)();
    } catch (exx) {
      try {
        // console.info(/strToJson---exx：/, exx)
        // 再给你一次机会，是不是下面这种情况：  "{\"ret\":\"0\", \"msg\":\"ok\"}"
        jsonObj = new Function("return '" + source + "'")();
        if (typeof jsonObj === "string") {
          //
          jsonObj = new Function("return " + jsonObj)();
        }
      } catch (exxx) {
        return text;
      }
    }
  }
  if (jsonObj != null && typeof jsonObj === "object") {
    try {
      // 要尽量保证格式化的东西一定是一个json，所以需要把内容进行JSON.stringify处理
      source = JSON.stringify(jsonObj);
      return jsonObj;
    } catch (exxxx) {
      return text;
    }
  }
}

onMounted(async () => {
  const res = await sentryDipTop();
  let list = strToJson(res);
  console.log(strToJson(res));
  pageData.series = list.data.slice(0,10);
  pageData.chartOptions.labels = list.title.slice(0,10);
});
</script>
<template>
  <div>
    <h3 style="margin: 0px">受攻击目标</h3>
    <div style="height: 364px; display: flex; align-items: center; justify-content: center">
      <apexchart
        v-if="pageData.series?.length"
        width="100%"
        type="pie"
        :options="pageData.chartOptions"
        :series="pageData.series"
      ></apexchart>
    </div>
  </div>
</template>

<style scoped></style>
